<template>
  <div class="bg">
    <div>
      <BlueBox class="" title="作业位置数量" :list="leftlist" />
      <BlueBox class="rightList" title="场内人员信息" :list="rightlist" union="人" />
    </div>
    <TipBox v-for="(item, index) in iconList" :key="index" v-bind="{ ...item }" />
  </div>
</template>

<script>
import TipBox from '@/components/tipBox/index.vue'
import BlueBox from '@/components/blueBox/index.vue'
export default {
  name: 'centerMap',
  components: {
    TipBox,
    BlueBox
  },
  data() {
    return {
      componentWidth: '',
      componentHeight: '',
      leftlist: [],
      rightlist: [
        {
          dataIndex: 'visitor',
          number: 0,
          name: '访客'
        },
        {
          dataIndex: 'users',
          number: 0,
          name: '员工'
        },
        {
          dataIndex: 'outsourcedTeam',
          number: 0,
          name: '外委队伍'
        }
      ],
      iconList: [
        {
          name: '主厂房机侧',
          title: 1,
          top: '223px',
          left: '319px'
        },
        {
          name: '主厂房炉侧',
          title: 2,
          top: '123px',
          left: '399px'
        },
        {
          name: '封闭煤场',
          title: 3,
          top: '8px',
          left: '349px'
        },
        {
          name: '辅控楼',
          title: 4,
          top: '162px',
          left: '549px'
        },
        {
          name: '卸煤间',
          title: 5,
          top: '25px',
          left: '632px'
        },
        {
          name: '物资仓库',
          title: 6,
          top: '69px',
          left: '713px'
        },
        {
          name: '检修楼',
          title: 7,
          top: '121px',
          left: '886px'
        },
        {
          name: '办公楼',
          title: 8,
          top: '289px',
          left: '453px'
        },
        {
          name: '化学楼',
          title: 9,
          top: '289px',
          left: '596px'
        },
        {
          name: '燃料楼',
          title: 10,
          top: '45px',
          left: '524px'
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.componentWidth = this.$el.offsetWidth // 获取元素宽度并设置到data中
      this.componentHeight = this.$el.offsetHeight
      console.log(this.componentWidth + '   ' + this.componentHeight)
    })
  }
}
</script>

<style scoped>
.bg {
  background: url('@/assets/isep/center.png') no-repeat;
  width: 1184px;
  height: 385px;
  margin-top: 24px;
  position: relative;
  .rightList {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
</style>
